<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 视频图像质量增强系统</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
            position: relative;
            overflow: hidden;
        }

        /* 添加动态背景 */
        body::before {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                transparent 20%,
                rgba(74, 144, 226, 0.1) 25%,
                transparent 30%
            );
            animation: wave 15s linear infinite;
        }

        @keyframes wave {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        .login-container {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: var(--border-radius);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2),
                        0 0 40px rgba(74, 144, 226, 0.1);
            width: 100%;
            max-width: 400px;
            position: relative;
            z-index: 1;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* 添加科技装饰元素 */
        .login-container::before,
        .login-container::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border: 2px solid var(--primary-color);
            animation: rotate 4s linear infinite;
        }

        .login-container::before {
            top: -10px;
            left: -10px;
            border-right: none;
            border-bottom: none;
        }

        .login-container::after {
            bottom: -10px;
            right: -10px;
            border-left: none;
            border-top: none;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }

        .login-header h1 {
            color: var(--secondary-color);
            font-size: 24px;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(74, 144, 226, 0.2);
        }

        .login-header::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
        }

        .login-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-group label {
            color: var(--secondary-color);
            font-weight: 500;
        }

        .form-group input {
            padding: 12px;
            border: 1px solid rgba(74, 144, 226, 0.2);
            border-radius: var(--border-radius);
            font-size: 16px;
            background: rgba(255, 255, 255, 0.9);
            transition: all 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2),
                        0 0 20px rgba(74, 144, 226, 0.1);
            transform: translateY(-2px);
        }

        .login-button {
            background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
            color: #fff;
            padding: 12px;
            border: none;
            border-radius: var(--border-radius);
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .login-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transition: 0.5s;
        }

        .login-button:hover::before {
            left: 100%;
        }

        .login-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(22, 160, 133, 0.3);
        }

        .error-message {
            color: #e74c3c;
            text-align: center;
            margin-top: 10px;
            display: none;
            animation: shake 0.5s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }

        /* 添加科技感装饰点 */
        .tech-dots {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .tech-dot {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(74, 144, 226, 0.5);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.5; }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="tech-dots" id="techDots"></div>
    <div class="login-container">
        <div class="login-header">
            <h1>视频图像质量增强系统</h1>
            <p>请登录以继续</p>
        </div>
        <form class="login-form" onsubmit="return handleLogin(event)">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required autocomplete="off">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit" class="login-button">登录</button>
            <div id="errorMessage" class="error-message">用户名或密码错误</div>
        </form>
    </div>

    <script>
        // 添加动态科技点
        function createTechDots() {
            const container = document.getElementById('techDots');
            const dotsCount = 20;

            for (let i = 0; i < dotsCount; i++) {
                const dot = document.createElement('div');
                dot.className = 'tech-dot';
                dot.style.left = Math.random() * 100 + '%';
                dot.style.top = Math.random() * 100 + '%';
                dot.style.animationDelay = Math.random() * 2 + 's';
                container.appendChild(dot);
            }
        }

        function handleLogin(event) {
            event.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorMessage = document.getElementById('errorMessage');

            if (username === 'admin' && password === 'admin') {
                sessionStorage.setItem('isLoggedIn', 'true');
                window.location.href = 'main.html';
            } else {
                errorMessage.style.display = 'block';
                // 添加抖动动画
                errorMessage.style.animation = 'none';
                setTimeout(() => errorMessage.style.animation = 'shake 0.5s ease-in-out', 10);
            }

            return false;
        }

        // 初始化科技点
        createTechDots();
        
        // 防止已登录用户通过浏览器后退按钮返回登录页面
        window.history.forward();
    </script>
</body>
</html> 